<template>
  <div class="addJoin1" v-cloak v-show="show">
    <div class="top border-s">
      <div class="return_left" @click="personalcenter">
        <img src="../assets/image/home_btn_03.png" alt="">
      </div>
      <div class="return_right" @click="cooperation">合作商户</div>
      <p>中北镇</p>
    </div>
    <div style="height:47px;"></div>
    <div class="weathera border-s">
      <div class="weather-box">
        <ul class="weather">
          <li><img src="../assets/image/weather.png"></li>
          <li>{{weather}}</li>
          <div class="clearfix"></div>
        </ul>
      </div>
    </div>
    <div class="weathera border-s">
      <div class="weather-box">
        <ul class="weather">
          <li><img src="../assets/image/clxx.png"></li>
          <li>{{limit_line}}</li>
          <div class="clearfix"></div>
        </ul>
      </div>
    </div>
    <div class="content-box menu-box">
      <ul class="menu" :style="{ 'width': (classify_list.length)*80 + 'px'}">
        <div class="menu-tu" @click="classification()"><img src="../assets/image/menu.png"></div>
        <li @click="checkmenu(item.cl_name,index,item.cl_id)" v-for="(item,index) in classify_list"><span :class="{ active : current_index == index}" v-text="item.cl_name"></span></li>
        <div class="clearfix"></div>
      </ul>
    </div>
    <div class="local">
      <div class="service" @click="classification"><span><img src="../assets/image/home_btn_service.png"></span>我要服务</div>
    </div>
    <div id="bmap" class="container" :style="{ 'height' : heightmap + 'px' }">
    </div>
    <div class="fixed" v-if="vouchersta">
       <div class="fixed_home" v-if="vousta">
         <div class="home_delete" @click="voucherClick">
           <img src="../assets/image/home_btn_02.png" alt="">
         </div>
         <img src="../assets/image/home_img_01.png" alt="">
       </div>
      <div class="invitecode" v-if="inviteSta">
         <div class="invite_input">
           <input type="text" placeholder="填写礼品领取码" v-model="promoter_code"/>
         </div>
        <div class="invite_l">
          <div class="quxiao" @click="cancelInvite">
            取消
          </div>
          <div class="sure" @click="sureInvite">
            确定
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  let Jquery = require('Jquery')
  import BMap from 'BMap'
  import { TransferDom } from 'vux'
  export default {
    name: 'ServiceHome',
    directives: {
      TransferDom
    },
    data () {
      return {
        show: false,
        classify_list: [],
        limit_line: '',
        weather: '',
        annotations: '',
        icon: '',
        current_index: 0,
        heightmap: '',
        classid: '',
        staff_list: [],
        lng: '',
        lat: '',
        current_icon: '',
        vouchersta: false,
        vousta: false,
        inviteSta: false,
        show_alert_status: false,
        show_coupon_status: false,
        promoter_code: ''
      }
    },
    methods: {
      personalcenter: function () {
        this.$router.push('PersonalCenter')
//        window.location.href = '#/PersonalCenter'
      },
      cancelInvite: function () {
        this.vouchersta = false
        this.inviteSta = false
      },
      sureInvite: function () {
        let thisObj = this
        if (thisObj.promoter_code === '') {
          thisObj.$vux.toast.show({
            text: '请输入礼品领取码',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        thisObj.$chaos.ajax({
          data: {
            promoter_code: thisObj.promoter_code
          },
          slient: true,
          userinfo: true,
          url: 'User/bindingSurerior',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              this.vouchersta = false
              this.inviteSta = false
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      voucherClick: function () {
        this.vousta = false
        if (this.show_coupon_status) {
          this.vouchersta = true
          this.inviteSta = true
        }
      },
      classification: function () {
        window.location.href = '#/ClassifiCation'
      },
      classifi: function (id, callback) {
        var thisObj = this
        console.log(id)
        thisObj.$chaos.ajax({
          data: {
            classify_id: id
          },
          slient: true,
          userinfo: false,
          url: 'Service/getStaffByClassifyId',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.staff_list = res.result.staff_list
              callback()
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      checkmenu: function (clname, index, id) {
        this.current_index = index
        this.classid = id
        this.readymap()
      },
      cooperation: function () {
        window.location.href = '#/Cooper'
      },
      cardUser: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          slient: true,
          userinfo: true,
          url: 'User/getAlertStatus',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.show_alert_status = res.result.show_alert_status
              thisObj.show_coupon_status = res.result.show_coupon_status
              if (!thisObj.show_alert_status && !thisObj.show_coupon_status) {
                return false
              }
              if (thisObj.show_alert_status && !thisObj.show_coupon_status) {
                thisObj.vouchersta = true
                thisObj.inviteSta = true
              }
              if (thisObj.show_alert_status && thisObj.show_coupon_status) {
                thisObj.vouchersta = true
                thisObj.vousta = true
              }
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      updateUser: function () {
        let thisObj = this
        if (thisObj.$chaos.getUserInfo()) {
          thisObj.$chaos.ajax({
            data: {
              longitude: thisObj.lng,
              latitude: thisObj.lat
            },
            slient: true,
            userinfo: true,
            url: 'User/updateUserCoordinate',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
              } else {
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        }
      },
      readymap: function () {
        var thisObj = this
        var geolocation = new BMap.Geolocation()
        geolocation.getCurrentPosition(function (r) {
          var map = new BMap.Map('bmap')
          window.map = map
          var myHome = new BMap.Icon(thisObj.current_icon, new BMap.Size(20, 20))
          var mk = new BMap.Marker(r.point, {icon: myHome})
          map.addOverlay(mk)
          map.panTo(r.point)
          var point = new BMap.Point(r.point.lng, r.point.lat)
          map.centerAndZoom(point, 11)
          thisObj.lng = r.point.lng
          thisObj.lat = r.point.lat
          thisObj.updateUser()
          thisObj.classifi(thisObj.classid, function () {
            thisObj.addMarker(thisObj.staff_list)
          })
        }, {enableHighAccuracy: true})
      },
      addMarker: function (points) {
        for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
          var point = new BMap.Point(points[i].lon, points[i].lat)
          var myIcon = new BMap.Icon(this.icon, new BMap.Size(40, 40))
          var marker = new BMap.Marker(point, {icon: myIcon})
          window.map.addOverlay(marker)
        }
      },
      verify: function () {
        let thisObj = this
        this.$chaos.setTitle('中北镇')
        this.$store.commit('title', '中北镇')
        this.$store.commit('headerShow', false)
        this.$store.commit('footerShow', false)
        var toph = Jquery(window).height()
        this.heightmap = toph - 183
        this.$chaos.verify(function () {
          thisObj.$chaos.ajax({
            slient: true,
            userinfo: true,
            url: 'Service/index',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
                thisObj.classify_list = res.result.classify_list
                thisObj.classid = thisObj.classify_list[0].cl_id
                thisObj.limit_line = res.result.limit_line
                thisObj.weather = res.result.weather
                thisObj.annotations = res.result.annotations
                thisObj.icon = res.result.icon
                thisObj.current_icon = res.result.current_icon
                thisObj.readymap()
                thisObj.cardUser()
                thisObj.show = true
              } else {
                thisObj.show = true
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {

    },
    destroyed: function () {
      this.$store.commit('headerLeft', {showBack: true, backText: ' '})
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  .addJoin1{
    overflow: hidden;
  }
  [v-cloak] {
    display: block;
  }
  .return_left{
    float: left;
    line-height: 46px;
    width: 40px;
    text-align: center;
  }
  .return_left img{
    width: 18px;
    height: 18px;
    margin-left: 10px;
  }
  .invite_l{
    margin:15px 28px;
  }
  .sure{
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: rgb(255,160,40);
    border-radius: 5px;
    color: #fff;
    float: right;
  }
  .quxiao{
    color: rgb(255,160,40);
    float: left;
    width: 60px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid rgb(255,160,40);
  }
  .invite_input{
    margin: 18px 28px;
    padding: 7px;
    border-radius: 5px;
    background: #f5f5f5;
  }
  .invite_input input{
    background-color: #f5f5f5;
  }
  .invitecode{
    width: 220px;
    height: 120px;
    background: #fff;
    border-radius: 4px 4px;
    left: 50%;
    margin-left: -110px;
    position: absolute;
    top: 30%;
  }
  .home_delete{
    position: absolute;
    right: 20px;
    top: 0px;
    width:20px;
    height:20px;
  }
  .fixed{
    position: fixed;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.4);
    left:0px;
    top:0px;
    z-index:444444;
  }
  .fixed_home{
    position: absolute;
    top: 33%;
    width: 227px;
    height: 155px;
    left: 50%;
    margin-left: -113px;
  }
  .container{
    width:100%;
  }
  .menu {
    line-height: 45px;
    width: 120%;
    overflow: hidden;
    height: 45px;
    position: relative;
  }
  .menu-tu {
    position: fixed;
    right: 0px;
    background-color: white;
    width: 50px;
  }
  .local {
    overflow: auto;
    position: fixed;
    width: 100%;
    z-index: 3333;
    bottom: 102px;
    height: 120px;
  }
  .service {
    position: absolute;
    left: 50%;
    width: 108px;
    height: 35px;
    border-radius: 16px;
    background-color: #FFA028;
    box-shadow: 2px 2px 8px #FFA028;
    bottom: 40px;
    line-height: 35px;
    color: white;
    padding-left: 29px;
    margin-left: -65px;
  }
  .service span img {
    width: 18px;
    height: 15px;
    margin-right: 7px;
    vertical-align: -3px;
  }
  .menu-tu img {
    width: 20px;
    height: 20px;
    margin-left: 16px;
    vertical-align: -6px;
  }
  .menu li {
    float: left;
    margin-right: 15px;
    line-height: 18px;
    margin-top: 14px;
  }
  .menu li .active {
    color: #ffa028;
    padding-bottom: 8px;
    border-bottom: 2px solid #FFA028;
  }
  .content-box {
    padding: 0px 15px;
  }
  .menu-box {
    background-color: #f9f9f9;
    z-index: 100;
  }
  .border-s{
    border-bottom: 1px solid #efefef;
  }
  .top{
    position: fixed;
    width:100%;
    height:46px;
    left:0;
    top:0;
    background: #fff;
  }
  .top p {
    margin: 0 100px;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
  }
  .return_right{
    float: right;
    line-height: 46px;
    width: 88px;
    text-align: center;
  }
  .clearfix {
    clear: both;
  }
  .weather li:nth-child(1) img {
    vertical-align: -7px;
    width: 20px;
    height: 22px;
  }
  .weathera{
    line-height: 45px;
    overflow: hidden;
    height: 45px;
    padding: 0px 15px;
    background: #fff;
  }
  .weather-box {
    background-color: white;
  }
  .weather {
    line-height: 45px;
    width: 100%;
    /*overflow: hidden;*/
    height: 45px;
  }
  .weather li {
    float: left;
    margin-right: 10px;
    position: relative;
    font-size: 12px;
    /*overflow: auto;*/
  }
</style>
